 <template>
  <div class="city top-page">
    <div class="top">
      <van-search 
        v-model="searchValue" 
        placeholder="城市/区域/位置"
        shape="round"
        show-action
        @cancel="cancelClick"
      />
      <!-- <Suspense> -->
      <van-tabs v-model:active="tabActive"  color="#ff9854" line-height="3">
        <!-- <van-tab :title="allCity?.cityGroup?.title">内容 1</van-tab>
        <van-tab :title="allCity?.cityGroupOverSea?.title">内容 2</van-tab> -->
        <template v-for="(value,key,index) in allCities" :key="index">
          <van-tab :title="value.title" :name="key" :change="itemClick(value)"></van-tab>
        </template>
      </van-tabs>
    <!-- </Suspense> -->
    </div>
    <div class="content">
      <template v-for="(value,key,index) in allCities" :key="index" >
          <cityGroupItem v-show="tabActive === key" :groupData="value"></cityGroupItem>
      </template>
    </div>
  </div>
 </template>
 <script setup>
import { useRouter } from 'vue-router'
import {ref,reactive, toRefs,computed} from 'vue'
import useCityStore from '@/stores/modules/city';
import { storeToRefs } from 'pinia';
import cityGroupItem from './cpns/city-group-item.vue'

 const searchValue = ref('')
 const tabActive = ref()
 const router = useRouter()
  const cancelClick = ()=>{
    router.back()
  }

 const cityStore = useCityStore()
 cityStore.fetchAllCitiesData()
 const { allCities } = storeToRefs(cityStore) 

 console.log('请求结束，是否获得请求数据');
 console.log('allCities.value',allCities.value,allCities.value['cityGroup']);
//  console.log('tabActive.value',tabActive.value,',',allCities.value[tabActive.value]);
 const currnetGroup = computed(()=>allCities.value[tabActive.value])
//  const currnetGroup = allCities.value['cityGroup']
//  const cityGroupOverSea = allCities.value['cityGroupOverSea']

 const itemClick = (value)=>{
  // console.log("itemClick",value.title);
 }


 </script>

 <style lang="less" scoped>
 
.city {
  // --van-tabs-line-height: 30px;

  // top固定定位
  // .top {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }

  // .content {
  //   margin-top: 98px;
  // }

  .top {
    position: relative;
    z-index: 9;
  }

  // 布局滚动
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
 </style>